<template>
  <div class="container">
    <el-row class="card_header" type="flex">
      <div class="qb_title">题库列表</div>
    </el-row>

    <div class="card_container" type="flex">
      <div class="card">
        <el-card class="new_qb_card">
          <div slot="header" class="header">
            <span>新建题库</span>
          </div>
          <div class="body">
            <el-button
              class="new_qb_button"
              icon="el-icon-plus"
              plain
              @click="dialogFormVisible = !dialogFormVisible"
            ></el-button>
          </div>
        </el-card>
      </div>
      <div
        class="card"
        v-for="(item, index) in qbItems"
        :key="index"
        :itemIndex="index"
      >
        <qbItem
          :qb-item="item"
          @aSignal="aFun($event)"
          @deleteqb="deleteQbHandel"
        ></qbItem>
      </div>
    </div>

  

    <el-dialog
      title="新增题库"
      :visible.sync="dialogFormVisible"
      center
      width="20%"
      :append-to-body="true"
    >
      <el-form ref="form" :model="qbform">
        <el-form-item label="题库名称" label-width="80px" prop="qb_name">
          <el-input
            v-model="qbform.qb_name"
            :label-width="formLabelWidth"
            placeholder="qb_rname"
            style="width: auto"
          ></el-input>
        </el-form-item>
        <el-form-item label="题库内容" label-width="80px" prop="qb_description">
          <el-input
            v-model="qbform.qb_description"
            :label-width="formLabelWidth"
            placeholder="qb_description"
            style="width: auto"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addqb">添加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import qbItem from "@/view/Home/components/QuestionBase/qbItem";
import axiosinstance from "@/util/http.js";

export default {
  name: "QuestionBase",

  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: "100px",
      user: {},
      na: "dasdsasa",
      total:10,
      page:1,
      pageSize:10,
       arr:[1,2,3,4],
      qbItems: [], //获取到的服务器数据
      qbform: {
        username: "",
        qb_name: "",
        qb_description: "",
      },
    };
  },
  created() {
    axiosinstance
      .get("/questionbase/questionbaselist", {
        params: {
          page: 1,
          pageSize: 10,
        },
      })
      .then((res) => {
        console.log(res);
        this.qbItems = res.data.data;
        

      });
  },
  methods: {
  async refreshqbList(){
      await axiosinstance.get('/questionbase/questionbaselist',{
        params:{
          page:this.page,
          pageSize:this.pageSize,
          username:this.$store.getters.getuser.username
        }
      }).then(res =>{
        this.qbItems = res.data?.data;
        this.total = res.data?.data?.total;
        console.log(res.data)
      } )
    },


    aFun(a, b) {
      console.log(a, b);
    },
    addqb() {
      this.user = this.$store.getters.getuser;
      console.log(this.user);
      let qb = {
        user: {
          username: this.user.username,
        },
        qb: {
          qb_name: this.qbform.qb_name,
          qb_description: this.qbform.qb_description,
        },
      };
      console.log(qb);

      //校验

      //发送请求
      axiosinstance.post("/questionbase/addquestionbase", qb).then((res) => {
        console.log(res);
        axiosinstance
          .get("/questionbase/questionbaselist", {
            params: {
              page: 1,
              pageSize: 20,
            },
          })
          .then((res) => {
            console.log("qblist", res);
            this.qbItems = res.data.data;
          });
      });
      this.dialogFormVisible = false;
    },
    async deleteQbHandel() {
      let res = await axiosinstance.get("/questionbase/questionbaselist", {
        params: {
          page: 1,
          pageSize: 20,
        },
      });
      this.qbItems = res.data.data;
    },

    handleSizeChange(e){
      console.log(e)
      this.pageSize = e;
       this.refreshqbList()
    },
    handleCurrentChange(e){
      this.page = e;
       this.refreshqbList()
    },
  },
  components: {
    qbItem,
  },
};
</script>

<style scoped lang="less">
.container {
  height: 100%;
  position: relative;
  background-color: #e5e5e5;
  ::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  .card_header {
    font-size: 20px;
    font-weight: bold;
    font-color: #123;
    margin: 0 auto;
  }
  .card_container {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-items: center;
    margin: 0 auto;
    padding-left: 180px;
    .card {
      width: 20%;
      //height:150px;
      margin: 1%;
      .new_qb_card {
        height: 100%;
        border: 2px solid rgb(255, 255, 255);
        border-radius: 35px;
        transition-delay: 0.04s;
        transition-duration: 0.7s;
        &:hover {
          transform: translate(0, -5px);
          border-radius: 15px;
          transition-delay: 0.13s;
          transition-duration: 0.7s;
        }
        .header {
        }
        .body {
          .new_qb_button {
            //background:green;
            margin: 0;
            padding: 0;
            border: 0px;
            border-radius: 50%;
            font-size: 80px;
            vertical-align: middle;
            &:hover {
            }
          }
        }
      }
    }
  }
}

.qb_title {
  margin: 20px auto;
}
</style>